<div class="login-container">
  <div class="login-card">
    <h2>用户登录</h2>
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="login-form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" formControlName="username" placeholder="请输入用户名"
          [class.is-invalid]="loginForm.get('username')?.invalid && loginForm.get('username')?.touched">
        <div class="error-message" *ngIf="getErrorMessage('username')">
          {{ getErrorMessage('username') }}
        </div>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" formControlName="password" placeholder="请输入密码"
          [class.is-invalid]="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
        <div class="error-message" *ngIf="getErrorMessage('password')">
          {{ getErrorMessage('password') }}
        </div>
      </div>

      <div class="form-actions">
        <button type="submit" [disabled]="isLoading || loginForm.invalid">
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
        <a routerLink="/register" class="register-link">没有账号？立即注册</a>
      </div>

      <div class="error-message" *ngIf="loginError">
        {{ loginError }}
      </div>
    </form>
  </div>
</div>